﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Cell Level Binding</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;
            
            var sheet = spread.sheets[0];
            sheet.isPaintSuspended(true);

            var person = { name: "Wang feng", age: 25, sex: "male", address: { postcode: "710075" } };
            var source = new spreadNS.CellBindingSource(person);
            sheet.setBindingPath(1, 1, "name");
            sheet.setBindingPath(2, 2, "age");
            sheet.setBindingPath(3, 3, "sex");
            sheet.setBindingPath(4, 4, "address.postcode");
            sheet.setDataSource(source);

            var path = sheet.getBindingPath(0, 0);
            $("#bindingPath").text(path || "");
            sheet.bind(spreadNS.Events.SelectionChanged, function() {
                var activeCell = sheet.getSelections()[0];
                var path = sheet.getBindingPath(activeCell.row, activeCell.col);
                $("#bindingPath").text(path || "");
            })
            sheet.isPaintSuspended(false);

        };
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:410px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label id="bindingPath"></label>
        </div>
    </div>
</div>
</body>
</html>
